<template>
    <div id="main">
        <div class="content">
            <router-view></router-view>
        </div>
        <ul>
            <router-link tag="li" to="/home">首页</router-link>
            <router-link tag="li" to="/discover">发现</router-link>
            <router-link tag="li" to="/order">订单</router-link>
            <router-link tag="li" to="/profile">我的</router-link>
        </ul>
    </div>
</template>
<style lang="scss" scoped>
    #main{
        width: 100%;
        height: 100%;
        .content {
            height: calc(100% - 60px);
            overflow: auto;
        }
        ul{
            height: 60px;
            display: flex;
            background-color: #fff;
            justify-content: space-around;
            align-items: center;
            .router-link-exact-active{
                color: red;
            }
        }
    }
</style>